14. Mode

Introduction to Mode

The last core Webpack concept we’re going to cover is Mode. When you build, you probably noticed the warning:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.

The issue is that we haven’t told webpack which mode to run in. Modes won’t make sense until we delve into environments. You have probably already come across the idea of environments in code projects, or at least heard mention of a “development” or “prod” environment. But in order to use webpack to its true potential, we have to fully understand these concepts.

Production vs Development

Production vs. Development Environments

Developers refer to the various “states” of a website as environments. When we are developing a website, we call it the development environment - we run the server on localhost and use tools that are specifically convenient for us as developers. On the other hand, there is a production environment, which is our code on a server and where we can tune every tool and file for optimal efficiency, thereby giving our users the best experience when they use the webpage. There can be many environments for a project, like a testing environment or review environment, but we are going to focus on development and production for now.

There are lots of tools that aim to make writing code easier for developers. One of these tools, called “sass”, we will cover in a future lesson, but for now just know that it is css with some developer friendly syntax and features. It’s great that we have tools that make development easier, but if you take sass as an example - we can’t run sass on a server. All our sass files have to be run through a transpiler in order to become css that can go on a live webpage. No matter how awesome a development tool is, in the end our code will be judged by how well it runs on a server, and oftentimes what is best for the server is the opposite of what is convenient for developers. So how do we handle both of these environments? By utilizing build tools, we can make code that is convenient for our dev team, without sacrificing speed on the server.

One of the awesome features of webpack, is that it lets us apply configurations to our code based on the environment we are running. We can create a development environment (MODE in webpack) and run totally different loaders and plugins than we do for production mode.

Now we have learned the second part of why we use build tools. First, we learned that build tools allow devs to use the tools that are more convenient for them. The other side of that coin is that build tools simultaneously allow devs to optimize code for the server. Build tools like Webpack are one tool we can use to help us with organization in all environments. If that doesn’t fully make sense now, don’t worry too much, it will become more clear as we go along.

Mode Graphic

You can see that a lot of times, what is best for developers is the opposite of what is most efficient for the server. Webpack helps us have the best of both worlds.

You can see that a lot of times, what is best for developers is the opposite of what is most efficient for the server. Webpack helps us have the best of both worlds.

FEND C04 L02 A07 Mode

Mode Quiz

QUESTION:

Which environment is concerned with what happens on a server?

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

Prod RegEx Solution

Mode Quiz

Select the following webpack loaders and plugins that you would expect to find in development mode and not in production mode
SOLUTION:
  • Linters
  • A source map mode for debugging

Mode Quiz

Which environment has the most direct effect on users?
SOLUTION: Production

Interview Question

QUESTION:

Interview Question

Would you minify files for development or production? Why?

ANSWER:

Some interview questions will feel deceptively easy. That doesn’t necessarily mean that the question has an unexpected answer. With a question like this, the interviewer really wants to know that you understand the concepts and differences between development and production. In this question, you can answer by simply saying “production”, but you would be missing out. The “why” part is your big opportunity to show just how much you know about the subject. Even if the interviewer does not add the “why” at the end in person. Pretend it’s there. Take every opportunity to show your grasp of important concepts.

Next Concept